<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta
			http-equiv="Content-Security-Policy"
			content="require-trusted-types-for 'script';"
		/>
		<title>Iconify Icon Demo: Usage</title>
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
				background: #fff;
				color: #000;
			}
			body {
				padding: 8px;
				font-size: 16px;
				line-height: 24px;
			}
			p {
				margin: 0;
				padding: 8px;
			}
			p:nth-child(2n) {
				background-color: #f8f8f8;
			}
			:where(p:hover) iconify-icon {
				color: green;
			}
			iconify-icon:hover {
				color: red;
			}

			.observer-test {
				display: flex;
				width: 100px;
				height: 32px;
				overflow-y: auto;
				background-color: rgba(0, 0, 0, 0.1);
			}
			.observer-test > div {
				margin-top: 100px;
			}

			.unset-size {
				display: flex;
				gap: 8px;
				background: #f0f0f0;
			}
			.unset-size iconify-icon {
				/* display: block; */
				width: 24px;
				height: 24px;
				animation: animate-unset 5s linear infinite;
				background: #fff;
			}
			.unset-size:hover iconify-icon {
				color: red !important;
			}

			@keyframes animate-unset {
				0% {
					width: 24px;
					height: 24px;
					color: #000;
				}
				50% {
					width: 128px;
					height: 64px;
					color: #800;
				}
				100% {
					width: 24px;
					height: 24px;
					color: #000;
				}
			}
		</style>
		<script>
			// Add icon before loading component: it will be added to IconifyPreload global
			(() => {
				// Universal loader example
				function add(data) {
					// Try iconify-icon
					try {
						window.customElements
							.get('iconify-icon')
							.addCollection(data);
					} catch (err) {
						// Try SVG framework
						try {
							window.Iconify.addCollection(data);
						} catch (err) {
							// Add to global preload variable
							try {
								(
									window.IconifyPreload ||
									(window.IconifyPreload = [])
								).push(data);
							} catch (err) {}
						}
					}
				}

				add({
					prefix: 'test',
					icons: {
						icon: {
							body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
						},
					},
				});
			})();
		</script>
		<script src="../dist/iconify-icon.min.js"></script>
		<script>
			// Add icon after loading icon component: it will be added using IconifyIcon static method addCollection()
			(() => {
				// Universal loader example
				function add(data) {
					// Try iconify-icon
					try {
						window.customElements
							.get('iconify-icon')
							.addCollection(data);
						return;
					} catch (err) {}

					// Try SVG framework
					try {
						window.Iconify.addCollection(data);
						return;
					} catch (err) {}

					// Add to global preload variable
					try {
						(
							window.IconifyPreload ||
							(window.IconifyPreload = [])
						).push(data);
					} catch (err) {}
				}

				add({
					prefix: 'test2',
					icons: {
						icon: {
							body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
						},
						animated: {
							body: '<g stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8L7.13 14" stroke-dasharray="10" stroke-dashoffset="10"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.18s" values="10;0"></animate></path><path d="M5.5 16L2 13" stroke-dasharray="8" stroke-dashoffset="8"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="8;0" begin="0.2s"></animate></path></g>',
							width: 14,
							height: 24,
						},
					},
				});
			})();
		</script>
	</head>
	<body>
		<p>
			This is a simple HTML page with few icons.<br />
			There are 2 entries for each sample: one as inline SVG, one using
			style.
		</p>
		<p>
			Icons that behave like images:
			<iconify-icon icon="bi:house-door"></iconify-icon>
			<iconify-icon icon="bi:house-door" mode="style"></iconify-icon>
			<iconify-icon icon="cif:ee"></iconify-icon>
			<iconify-icon icon="cif:ee" mode="style"></iconify-icon>
		</p>
		<p>
			Icon that behaves like an glyph (aligned to bottom of this text):
			<iconify-icon inline icon="bi:house-door"></iconify-icon>
			<iconify-icon
				inline="inline"
				icon="bi:house-door"
				mode="style"
			></iconify-icon>
			<iconify-icon inline icon="cif:ee"></iconify-icon>
			<iconify-icon
				inline="true"
				icon="cif:ee"
				mode="style"
			></iconify-icon>
		</p>
		<p>
			Changing icon color:
			<iconify-icon
				inline
				style="color: red"
				icon="bi:house-door"
			></iconify-icon>
			<iconify-icon
				inline
				style="color: red"
				icon="bi:house-door"
				mode="style"
			></iconify-icon>
		</p>
		<p>
			Big icon (showing various ways to do it):
			<iconify-icon
				inline
				icon="bi:person-lines-fill"
				style="font-size: 2em"
			></iconify-icon>
			<iconify-icon
				inline
				icon="bi:person-lines-fill"
				style="font-size: 2em"
				mode="style"
			></iconify-icon>
			<iconify-icon
				inline
				icon="bi:person-lines-fill"
				height="2em"
			></iconify-icon>
			<iconify-icon
				inline
				icon="bi:person-lines-fill"
				width="2em"
				mode="style"
			></iconify-icon>
			<br />
			Icons above should be aligned differently because they have
			different font-size. Vertical alignment is relative to font size.
		</p>
		<p>
			Big icon (showing various ways to do it):
			<iconify-icon
				icon="bi:person-lines-fill"
				style="font-size: 2em"
			></iconify-icon>
			<iconify-icon
				icon="bi:person-lines-fill"
				style="font-size: 2em"
				mode="style"
			></iconify-icon>
			<iconify-icon
				icon="bi:person-lines-fill"
				width="2em"
			></iconify-icon>
			<iconify-icon
				icon="bi:person-lines-fill"
				height="2em"
				mode="style"
			></iconify-icon>
			<br />
			Icons above should be aligned identically because they are not using
			inline mode.
		</p>
		<p>
			Rotation:
			<iconify-icon inline icon="bi:image"></iconify-icon>
			<iconify-icon inline icon="bi:image" mode="style"></iconify-icon>
			<iconify-icon inline icon="bi:image" rotate="1"></iconify-icon>
			<iconify-icon
				inline
				icon="bi:image"
				rotate="1"
				mode="style"
			></iconify-icon>
			<iconify-icon inline icon="bi:image" rotate="180deg"></iconify-icon>
			<iconify-icon
				inline
				icon="bi:image"
				rotate="180deg"
				mode="style"
			></iconify-icon>
			<iconify-icon inline icon="bi:image" rotate="75%"></iconify-icon>
			<iconify-icon
				inline
				icon="bi:image"
				rotate="75%"
				mode="style"
			></iconify-icon>
		</p>
		<p>
			Flip (4 icons, repeated 3 times with different mode attribute):
			<iconify-icon inline icon="test:icon"></iconify-icon>
			<iconify-icon inline icon="test:icon" mode="svg"></iconify-icon>
			<iconify-icon inline icon="test:icon" mode="style"></iconify-icon>
			<iconify-icon
				inline
				icon="test:icon"
				flip="horizontal"
			></iconify-icon>
			<iconify-icon
				inline
				icon="test:icon"
				flip="horizontal"
				mode="svg"
			></iconify-icon>
			<iconify-icon
				inline
				icon="test:icon"
				flip="horizontal"
				mode="style"
			></iconify-icon>
			<iconify-icon
				inline
				icon="test2:icon"
				flip="vertical"
			></iconify-icon>
			<iconify-icon
				inline
				icon="test2:icon"
				flip="vertical"
				mode="svg"
			></iconify-icon>
			<iconify-icon
				inline
				icon="test2:icon"
				flip="vertical"
				mode="style"
			></iconify-icon>
			<iconify-icon
				inline
				icon="test2:icon"
				flip="horizontal,vertical"
			></iconify-icon>
			<iconify-icon
				inline
				icon="test2:icon"
				flip="horizontal,vertical"
				mode="svg"
			></iconify-icon>
			<iconify-icon
				inline
				icon="test2:icon"
				flip="horizontal,vertical"
				mode="style"
			></iconify-icon>
		</p>
		<p>
			Non-square animated icon (with border):
			<iconify-icon
				inline
				icon="test2:animated"
				mode="style"
				style="border: 1px solid #ccc"
			></iconify-icon>
			<iconify-icon
				inline
				icon="test2:animated"
				mode="svg"
				style="border: 1px solid #ccc"
			></iconify-icon>
		</p>
		<p>
			Making icon square with attributes (with border):
			<iconify-icon
				width="1em"
				height="1em"
				icon="test2:animated"
				mode="style"
				style="border: 1px solid #ccc"
			></iconify-icon>
			<iconify-icon
				width="1em"
				height="1em"
				icon="test2:animated"
				mode="svg"
				style="border: 1px solid #ccc"
			></iconify-icon>
			<iconify-icon
				width="1em"
				height="1em"
				icon="cif:ee"
				mode="style"
				style="border: 1px solid #ccc"
			></iconify-icon>
			<iconify-icon
				width="1em"
				height="1em"
				icon="cif:ee"
				mode="svg"
				style="border: 1px solid #ccc"
			></iconify-icon>
		</p>
		<p>
			Making icon square with style (with border):
			<iconify-icon
				icon="test2:animated"
				mode="style"
				style="width: 1em; height: 1em; border: 1px solid #ccc"
			></iconify-icon>
			<iconify-icon
				icon="test2:animated"
				mode="svg"
				style="width: 1em; height: 1em; border: 1px solid #ccc"
			></iconify-icon>
			<iconify-icon
				icon="cif:ee"
				mode="style"
				style="width: 1em; height: 1em; border: 1px solid #ccc"
			></iconify-icon>
			<iconify-icon
				icon="cif:ee"
				mode="svg"
				style="width: 1em; height: 1em; border: 1px solid #ccc"
			></iconify-icon>
		</p>

		<h2>Hidden icons, appear on scroll</h2>
		<div class="observer-test">
			<div>
				<!-- should not render when not visible -->
				<iconify-icon
					icon="test2:icon"
					flip="horizontal,vertical"
					mode="style"
				></iconify-icon>
				<!-- should always render: attribute is boolean, value does not matter -->
				<iconify-icon
					noobserver
					icon="test2:icon"
					flip="horizontal,vertical"
					mode="style"
				></iconify-icon>
				<iconify-icon
					noobserver="false"
					icon="test2:icon"
					flip="horizontal,vertical"
					mode="style"
				></iconify-icon>
			</div>
		</div>

		<h2>Scale icon</h2>
		<p>Using height="none" and CSS, animating width/height and color</p>
		<div class="unset-size">
			<iconify-icon
				icon="bi:person-lines-fill"
				height="none"
				mode="svg"
			></iconify-icon>
			<iconify-icon
				icon="bi:person-lines-fill"
				height="unset"
				mode="style"
			></iconify-icon>
		</div>
	</body>
</html>
